<template>
  <div class="g-app">
    <input v-model="message" type="text">
    <div class="message-box">
      <span>我是输入框中的内容：{{ message }}</span>
    </div>
  </div>
  <div class="container">
   <span>我是输入框2: <input v-model="state" type="text"></span>
   <div class="message-box">
      <span>我是输入框2中的内容：{{ state }}</span>
    </div>
  </div>

  <div style="margin-top: 20px;">
   <span> obj: {{ obj }}</span>
   <br>
   <button @click="handlerChange">点击修改属性</button>
   <br>
   <span>孙悟空的爱好： {{ hobby }}</span>
   <br>
   <span>深层属性通过toRef引用,简化写法：{{ id }}</span>
   <br>
   <span>toRefs解构全部响应式属性, {{name }} - {{ age }} - {{ child }}</span>
    <br>
   <br>
    <div>我是toRaw获取到的原始对象:{{ list }} </div>
    <button @click="change">点击修改原始数据</button>
  </div>

</template>
<script lang="ts" setup>
import { myCustomRef } from '@/hooks/customRef';
import { shallowRef, ref, toRef,toRefs, toRaw, reactive } from 'vue';

const message = shallowRef(null)
const state = myCustomRef('hahha')
const obj = ref({name: '孙悟空', age: 18, hobby:['吃桃子', '打猪八戒'], child: {name: '小空空', id: 2}})
const hobby = toRef(obj.value, 'hobby');
const id = toRef(obj.value.child, 'id')
const handlerChange = () => {
  hobby.value.push('唱跳rap!')
}
// 使用 toRefs 将对象的所有属性转换为响应式引用
const { name, age, child } = toRefs(obj.value);
// 使用toRaw解除响应式，(获取源对象) toRaw只能解除reactive,readOnly的响应式
const list = toRaw(reactive([1,2,3]))
const target = toRaw(obj)

const change = () => {
  list.push(5)
  console.log('target', target)
  console.log('list', list)
}
</script>
<style scoped>
.message-box {
  margin-top: 20px;
  font-size: 24px;
}
.container {
  margin-top: 30px;
  font-size: 18px;
  color: red;
}
</style>
